<template>
  <div>
    <!-- 轮播图 -->
    <swiper indicator-dots>
      <swiper-item v-for="item in detail.pics" :key="item.pics_id">
        <image :src="item.pics_big_url" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <!-- 商品基本信息 -->
    <div class="goods-info">
      <div class="goods-price">￥{{detail.goods_price}}</div>
      <div class="goods-title">
        <h4>{{detail.goods_name}}</h4>
        <div class="goods-star">
          <span class="iconfont icon-shoucang"></span>
          <p>分享</p>
          <button class="share-btn" open-type="share">分享</button>
        </div>
      </div>
    </div>
    <!-- 商品的详细信息 -->
    <div class="goods-detail">
      <div class="goods-detail-title">商品详情</div>
      <div v-html="detail.goods_introduce"></div>
    </div>
    <!-- 底部菜单 -->
    <div class="footer">
      <button class="contact"></button>
      <div class="footer-left">
        <span class="iconfont icon-kefu"></span>
        <p>联系客服</p>
      </div>
      <navigator url="/pages/cart/main" class="footer-left" open-type='switchTab'>
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
      </navigator>
      <div class="footer-right" @click="addCard">加入购物车</div>
      <div class="footer-right" @click="toBuy">立即购买</div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      // 产品id
      gid: "",
      detail: {}
    };
  },
  methods: {
    toBuy(){
      // 跳转的时候需要先把当前页面信息保存到库存中
      this.addCard();
      // 跳转到Tab页面
      wx.switchTab({
        url:'/pages/cart/main'
      })
    },
    addCard() {
      // 加入购物车操作
      let cart = wx.getStorageSync("mycart") || {};
      // 这里需要做一次判断,如果以前已经有这个商品了,那直接将缓存中的数据改成加一件
      if (cart[this.gid]) {
        cart[this.gid].num = cart[this.gid].num + 1;
      } else {
        // 获取添加购物车的信息
        cart[this.gid] = this.detail;
        //添加属性num,把数据默认为1个
        cart[this.gid].num = 1;
        // 添加属性checked,默认数据是否选中
        cart[this.gid].checked = false;
      }
      // 将购物车的数据保存在本地
      wx.setStorageSync("mycart", cart);
      // 提示成功添加
      wx.showToast({
        title: "商品添加成功",
        icon: "success"
      });
    },
    async initData() {
      // 根据商品的id查询详细信息
      var res = await request("goods/detail", {
        goods_id: this.gid
      });
      this.detail = res.data.message;
      console.log(this.detail);
    }
  },
  onLoad(param) {
    this.gid = param.gid;
    this.initData();
  }
};
</script>

<style lang="less" scoped>
@import "./main.less";
</style>

